 <!--
    描述：登录页面
 -->
<template>
  <view class="u_charts_box">
		<view class="uCharts">
			<view class="qiun-charts">
				<canvas canvas-id="canvasArea1" id="canvasArea1" class="charts"
					:style="{ width: cWidth + 'px', height: cHeight + 'px' }"></canvas>
			</view>
		</view>	
			

  </view>
</template>

<script>
	//https://www.bookstack.cn/read/ucharts/5688eceab58fe813.md 教程
import uCharts from '@/js_sdk/u-charts/u-charts.min.js';
var canvaArea1 = null; //团操授课统计（条形图
 export default {
   data() {
     return {
		cWidth: uni.upx2px(650),
		cHeight: uni.upx2px(300),
		Area: {
		    categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
		    series: [{
		        name: '成交量A',
		        data: [10000, 80, 95, 150, 112, 132],
		        color: '#facc14'
		    }, {
		        name: '成交量B',
		        data: [70, 40, 6005, 100, 44, 68],
		        color: '#2fc25b'
		    }, {
		        name: '成交量C',
		        data: [35, 20, 2005, 37, 4, 20],
		        color: '#1890ff'
		    }]
		}
     }
   },
   onLoad() {
	  this.showArea1('canvasArea1', this.Area, 1);
   },
   methods: {
		//区域图
		showArea1(canvasId, chartData, idx) {
			let _self = this
			let Charts2 = {
				$this: _self,
				canvasId: canvasId,
				type: 'area',
				fontSize: 11,
				legend: {
					show: false
				},
				dataLabel: true,
				dataPointShape: false,
				background: "#F1D322",
				pixelRatio: 1,
				categories: chartData.categories,
				series: chartData.series,
				animation: true,
				padding: [15, 0, 0, 0],
				xAxis: {
					type: 'grid',
					gridColor: 'rgba(255,255,255,0)',
					gridType: 'dash',
					dashLength: 8,
					// boundaryGap: 'justify',
				},
				yAxis: {
					gridType: 'dash',
					gridColor: 'rgba(255,255,255,0)',
					dashLength: 8,
					splitNumber: 5,
					min: 0,
					max: 20,
					data: [{ //注意要写在data里面
						format: (val) => {
							if (val >= 10000) {
								return (val / 10000).toFixed(1) + 'w'
							} else if (val >= 1000) {
								return (val / 1000).toFixed(1) + 'k'
							} else {
								return val
							}
						},
						max: 20 //此处为最大值，有时会有点的数值被盖住的情况，所以需要设置个变化的最大值，将图表撑起来
					}]
				},
				width: _self.cWidth,
				height: _self.cHeight,
				extra: {
					area: {
						type: 'curve',
						opacity: 0.2,
						addLine: true,
						width: 2
		
					}
				}
			}
		
			canvaArea1 = new uCharts(Charts2); //团操场馆收入业绩 
		
		},
   }
 }
</script>

<style lang="scss">
  .MyPoints_box{
	width: 100%;
    padding: 32rpx;
    position: relative;
    box-sizing: border-box;
  }
</style>
